<template>
  <div class="item absolute left-0 bottom-0 w-full h-18 bg-gradient-to-b from-dark-50 to-dark-50 z-10" v-show="visible">
    <div class="flex flex-col justify-center h-full px-2">
        <div class="w-full flex items-center justify-between mb-3">
          <div class="flex items-center">
            <Icon v-if="isPlay" class="text-3xl align-middle text-white" @touchstart="play">
              <PauseCircleFilled />
            </Icon>
             <Icon v-else class="text-3xl align-middle text-white" @touchstart="play">
              <PlayArrowRound />
            </Icon>
            <div class="text-white text-lg ml-5">{{ currentTime }} / {{ totalTime }}</div>
          </div>
          <div class="min-w-1/4">
            <Icon v-if="isMuted" class="text-3xl align-middle text-white mr-5" @touchstart="muted">
              <VoicemailSharp />
            </Icon>
             <Icon v-else class="text-3xl align-middle text-white mr-5" @touchstart="muted">
              <VoiceChatRound />
            </Icon>
            <Icon class="text-3xl align-middle text-white">
              <ScreenLockLandscapeFilled />
            </Icon>
          </div>
        </div>
        <input type="range" ref="progress" @change="rangeChange" @input="rangeInput" min="0" max="100" class="progress w-full h-1 rounded-lg">
    </div>
  </div>
</template>

<script setup lang="ts">
import { Icon } from "@vicons/utils";
import { PlayArrowRound, VoicemailSharp, ScreenLockLandscapeFilled, PauseCircleFilled, VoiceChatRound } from "@vicons/material";
import { log } from "console";

const props = defineProps({
  instance: {
    type: Object,
    required: true
  },
  visible: {
    type: Boolean,
    default: true
  }
})

const emits = defineEmits(['update:visible'])

const isPlay = ref(false)
const isMuted = ref(false)
const totalTime = ref('00:00:00')
const currentTime = ref('00:00:00')
const progress = ref(null)

// 格式化时间
const formatTime = (duration) => {
  let hour = Math.floor(duration / 3600)
  let other = duration % 3600;
  let minute = Math.floor(other / 60)
  let second = (other % 60).toFixed(0)
  return `${hour}:${minute}:${second}`
}

// 更新当前播放时间
const updatePlatTime = () => {
  currentTime.value = formatTime(props.instance.currentTime)
  progress.value.value = (props.instance.currentTime / props.instance.duration ) * 100
} 

// 静音
const muted = () => {
  isMuted.value = !isMuted.value;
  if(isMuted.value) {
    props.instance.muted = true;
  } else {
    props.instance.muted = false;
  }
}

// 监听视频实例的变化
watch(() => props.instance, (val, old) => {
  if(old) { // 处理旧实例
    old.pause();
    old.removeEventListener('timeupdate', updatePlatTime)
  }
  if(val) {
     // 初始化时间
    totalTime.value =  formatTime(val.duration);
    currentTime.value = formatTime(val.currentTime);
    // 初始化进度条
    progress.value.value = 0
    // 初始化播放/暂停图标按钮
    if(!val.paused) {
      isPlay.value = false;
      play()
    } else {
      isPlay.value = false;
    }
  } else {
    // 隐藏控件
    emits('update:visible', false);
  }
})

// 播放视频
const play = () => {
  isPlay.value = !isPlay.value;
  if(props.instance) {
    if(isPlay.value) { // 播放
      props.instance.addEventListener('timeupdate', updatePlatTime)
      props.instance.play()
    } else { // 暂停
      props.instance.removeEventListener('timeupdate', updatePlatTime)
      props.instance.pause()
    }
  }
}

// 移动滑动条
const rangeInput = (e) => {
  props.instance.removeEventListener('timeupdate', updatePlatTime)
  props.instance.pause()
  let currTime = props.instance.duration * (progress.value.value / 100);
  props.instance.currentTime = currTime;
  currentTime.value = formatTime(currTime)
  
}
// 松开滑动滑动条
const rangeChange = (e) => {
  props.instance.addEventListener('timeupdate', updatePlatTime)
  props.instance.play()
}



</script>

<style lang="scss" scoped>
</style>